<template>
	<div class="s1">
		<el-main>
			<h3>
				本工具用于提取并整理EFB中的所有手册
			</h3>
			<h4>(作者制作本程序仅用于编程学习, 请勿用于其他用途)</h4>

			<h3>
				查看下列教程:
			</h3>
			<h4>
				<el-button
					type="primary"
					plain
					size="large"
					@click="openUrl"
					data-url=""
				>
					1.下载并安装爱思助手
				</el-button>
			</h4>

			<div style="height:20px"></div>
			<h4>
				2.按照爱思助手中的说明将EFB(用数据线)连接至PC，连接好之后画面应如图所示
			</h4>
			<img src="@/assets/intro/1.png" height="80%" width="80%" />
			<div style="height:20px"></div>
			<h4>
				3.左侧菜单选择 "应用游戏"
			</h4>
			<img src="@/assets/intro/2.png" height="30%" width="30%" />
			<h4>
				4. 搜索到"国航运行"，然后"浏览"国航运行
			</h4>
			<img src="@/assets/intro/3.png" height="70%" width="70%" />
			<h4>
				5. 进入Data目录
			</h4>
			<img src="@/assets/intro/4.png" height="70%" width="70%" />
			<h4>
				6. 按住 <el-tag>ctrl</el-tag> 或
				<el-tag>command</el-tag> 并选中以下4项
				<br />
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;margin-top:10px;"
					type="info"
				>
					DepartmentManual 文件夹
				</el-tag>
				<br />
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;margin-top:10px;"
					type="info"
				>
					Manual 文件夹
				</el-tag>
				<br />
				<el-tag
					class="el-icon-document"
					style="color:black;margin-top:10px;"
					type="info"
				>
					DepartmentManual.db3
				</el-tag>
				<br />
				<el-tag
					class="el-icon-document"
					style="color:black;margin-top:10px;"
					type="info"
				>
					ManualPlus.db3
				</el-tag>
			</h4>
			<img src="@/assets/intro/5.png" height="70%" width="70%" />
			<img src="@/assets/intro/6.png" height="70%" width="70%" />
			<h4>
				7. 将所选文件和文件夹导出，选择一个你喜欢的文件夹即可
			</h4>
			<img src="@/assets/intro/7.png" height="90%" width="90%" />
			<h4>
				8. 导出的内容应为下图这样
			</h4>
			<img src="@/assets/intro/8.png" height="70%" width="70%" />
			<h4>
				9. 所有的部门手册都在
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;"
					type="info"
				>
					DepartmentManual 文件夹 </el-tag
				>下
				<br />
				所有的主要手册都在
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;"
					type="info"
				>
					Manual / PDFFiles 文件夹
				</el-tag>
				文件夹下
				<br />
				文件名均为乱码，所以需要用本程序来整理
			</h4>
			<img src="@/assets/intro/9.png" height="70%" width="70%" />
			<h4>
				10. (点击右下角返回顶部)
				<i class="el-icon-caret-top"></i>
				<br />
				选择
				<el-tag type="info" style="color:black;" Plain
					>整理部门手册</el-tag
				>
				，然后选择刚才导出的<el-tag
					class="el-icon-document"
					style="color:black;"
					type="info"
				>
					DepartmentManual.db3
				</el-tag>
			</h4>
			<img src="@/assets/intro/10.png" height="100%" width="100%" />
			<h4>
				11. 选择
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;"
					type="info"
				>
					DepartmentManual 文件夹
				</el-tag>
				里的所有部门手册文件
			</h4>
			<img src="@/assets/intro/11.png" height="100%" width="100%" />
			<h4>
				12. 点击"开始整理"，即可完成文件重命名与整理
			</h4>
			<!-- 
			<video
				src="@/assets/intro/12 video.webm"
				controls
				autoplay
				loop
			></video>
			 -->
			<div style="height:100px"></div>
			<h4>
				13.整理主要手册的步骤和部门手册一样
				<br />
				(点击右下角返回顶部)
				<i class="el-icon-caret-top"></i>
				<br />
				选择
				<el-tag type="info" style="color:black;" Plain
					>整理主要手册</el-tag
				>
				，然后选择刚才导出的<el-tag
					class="el-icon-document"
					style="color:black;"
					type="info"
				>
					ManualPlus.db3
				</el-tag>
			</h4>
			<img src="@/assets/intro/13.png" height="80%" width="80%" />
			<h4>
				14. 选择
				<el-tag
					class="el-icon-folder-opened"
					style="color:black;"
					type="info"
				>
					Manual / PDFFiles 文件夹
				</el-tag>
				里的所有部门手册文件，然后点击 <el-tag>开始整理</el-tag>
			</h4>
			<img src="@/assets/intro/14.png" height="80%" width="80%" />
			<h4>
				15. 整理完成，整理好的两个文件夹如图所示
			</h4>
			<img src="@/assets/intro/15.png" height="80%" width="80%" />

			<img
				src="@/assets/b55c863e9327751235b5e913bb9aa43.jpg"
				height="60%"
				width="60%"
			/>
		</el-main>
	</div>
</template>

<script>
	const { shell } = require("electron");
	export default {
		name: "intro",
		data: function() {
			return {};
		},
		methods: {
			openUrl: function(e) {
				shell.openExternal("https://www.i4.cn");
			}
		}
	};
</script>
<style>
	.s1 .el-row {
		margin-top: 3%;
	}
	.s1 .el-container {
		height: 90%;
	}
	.s1 .ok {
		color: #67c23a;
	}
	.s1 .not-ok {
		color: #f56c6c;
	}
	.s1 h4 {
		margin-top: 10%;
	}
	.s1 video {
		height: 75%;
		width: 75%;
		border-width: 2px;
		border-style: solid;
		padding: 1%;
	}
</style>